<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-07-25 16:42:31
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-07-26 09:31:55
 * @FilePath: \出口卖家端\src\views\SalesApplication\components\SalesForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    v-model="dialogVisible"
    title="新增销售申请"
    width="60%"
    :before-close="handleClose"
  >
    <el-form
      v-loading="loading"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      size="large"
      label-position="top"
      status-icon
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="借款银行：" prop="bankId">
            <el-select
              v-model="ruleForm.bankId"
              size="large"
              class="wh50"
              placeholder="请选择借款银行"
            >
              <el-option
                v-for="item in bankList"
                :key="item.bankId"
                :label="item.bank"
                :value="item.bankId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="车辆入仓仓库：" prop="storeId">
            <el-select
              v-model="ruleForm.storeId"
              size="large"
              class="wh50"
              placeholder="请选择仓库"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="title mb-lg">
            <div>车辆基本信息</div>
            <div class="title-img" @click="handleCarAdd">
              <img src="@/assets/img/car-add_button.png" />
            </div>
          </div>
          <div
            class="car-info"
            v-for="(item, index) in ruleForm.carList"
            :key="index"
            :class="index > 0 ? 'mt-lg' : ''"
          >
            <c-table-template border :data="item">
              <el-table-column
                align="left"
                label="车辆信息"
                class-name="my-cell"
              >
                <template #default="scope">
                  <el-form-item
                    :rules="rules.carId"
                    :prop="`carList[${index}].${scope.$index}.carId`"
                  >
                    <c-vehicle-select
                      v-model="scope.row.carId"
                      placeholder="请选择车辆信息"
                      size="large"
                      class="wh"
                    />
                    <!-- <el-cascader
                      class="wh"
                      placeholder="请选择车辆信息"
                      v-model="scope.row.cars"
                      :options="carList"
                    /> -->
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="单价（元）"
                class-name="my-cell"
              >
                <template #default="scope">
                  <el-form-item
                    :rules="rules.price"
                    :prop="`carList[${index}].${scope.$index}.price`"
                  >
                    <c-money-input
                      placeholder="请输入车辆单价"
                      v-model="scope.row.price"
                    >
                      <template #prepend>￥</template>
                    </c-money-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="left" label="车架号" class-name="my-cell">
                <template #default="scope">
                  <el-form-item
                    :prop="`carList[${index}].${scope.$index}.vinList.${j}`"
                    :rules="rules.vin"
                    v-for="(d, j) in scope.row.vinList"
                    :key="j"
                  >
                    <el-input
                      placeholder="请输入车架号"
                      v-model="scope.row.vinList[j]"
                    >
                      <template #prepend>
                        <div class="vin-prepend">
                          <img src="@/assets/img/erweima-car.png" />
                        </div>
                      </template>
                      <template #append>
                        <el-icon
                          v-if="scope.row.vinList.length > 1"
                          @click="handleVinDel(index, j)"
                          class="pointer"
                          :size="16"
                          color="red"
                          ><Delete
                        /></el-icon>
                        <el-icon
                          @click="handleVinAdd(index)"
                          class="pointer"
                          :class="scope.row.vinList.length > 1 ? 'ml-sm' : ''"
                          v-if="scope.row.vinList.length === j + 1"
                          :size="16"
                          color="#409eff"
                          ><CirclePlus
                        /></el-icon>
                      </template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                width="80"
                align="center"
                label="操作"
                class-name="my-cell"
              >
                <template #default="scope">
                  <!-- <el-button type="primary" link @click="handleVinAdd(index)"
                    >添加</el-button
                  > -->
                  <el-button
                    v-if="ruleForm.carList.length > 1"
                    type="danger"
                    link
                    @click="handleCarDel(index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </c-table-template>
            <div class="car-info_footer">
              <span>已添加 {{ getCarItemsSum(item[0]).num }} 辆车 , 共计</span>
              <span style="color: #ff6355"
                >￥{{ getCarItemsSum(item[0]).price }}</span
              >
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="f-s-14">已选 {{ getCarListSum.num }} 辆车 , 共计</span>
      <span class="f-s-14 pr-lg" style="color: #ff6355"
        >￥{{ getCarListSum.price }}</span
      >
      <el-button size="large" :loading="buttonLoading" @click="handleClose"
        >取 消</el-button
      >
      <el-button
        size="large"
        :loading="buttonLoading"
        type="primary"
        @click="handleSubmit"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import { Delete, CirclePlus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useSalesForm } from "./index.js";
import { deepClone } from "@/utils/index";
const emits = defineEmits(["change"]);
const { proxy } = getCurrentInstance();
const ruleFormRef = ref();
const ruleForm = ref({});
const dialogVisible = ref(false);
const buttonLoading = ref(false);
const loading = ref(false);
const {
  bankList,
  storeList,
  carList,
  getCarItemsSum,
  getCarListSum,
  handleVinDel,
  handleVinAdd,
  handleCarDel,
  handleCarAdd,
  rules,
  k,
} = useSalesForm(ruleForm);

const handleOpen = (item) => {
  getOptionsList();
  if (item && item.id) {
    loading.value = true;
    proxy
      .$get({
        url: "/sellerCarInApply/getById",
        params: {
          id: item.id,
        },
      })
      .then((res) => {
        res.carList = res.carListDetailsList.map((x) => {
          x.vinList = x.vin.split(",");
          x.carId = x.carInfoId
          return [x];
        });
        ruleForm.value = {
          ...res.sellerCarInApply,
          carList: res.carList,
        };
        loading.value = false;
      });
  } else {
    ruleForm.value = {
      carList: [[{ vinList: [""] }]],
    };
  }

  dialogVisible.value = true;
};

const handleSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      const data = deepClone(ruleForm.value);
      const list = [];
      data.carList.forEach((x) => {
        x.forEach((r) => {
          list.push(r);
        });
      });
      data.carList = list;
      buttonLoading.value = true;
      let url = "/sellerCarInApply/apply";
      if (data.id) {
        url = "/sellerCarInApply/reapply";
      }
      proxy.$post({ url, data }).then(
        (res) => {
          ElMessage.success("操作成功");
          buttonLoading.value = false;
          handleClose();
          emits("change");
        },
        () => {
          buttonLoading.value = false;
        }
      );
    }
  });
};
const handleClose = () => {
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
};
const getOptionsList = () => {
  proxy.$get({ url: "/sellerCreditAmountApply/credit/amount" }).then((res) => {
    bankList.value = res;
  });
  proxy.$get({ url: "/StoreInfo/list" }).then((res) => {
    storeList.value = res;
  });
};
defineExpose({
  handleOpen,
});
</script>
<style lang="less" scoped>
:deep(.el-table__header .el-table__cell) {
  background: #fafafa !important;
}
:deep(.el-input-group__prepend) {
  color: #595959;
  padding: 0 10px;
  border-right: 0px !important;
  background: #fff !important;
}
:deep(.el-input-group__append) {
  color: #595959;
  padding: 0 10px;
  border-right: 0px !important;
  background: #fff !important;
}

:deep(.el-table .my-cell) {
  vertical-align: top;
}
.title {
  font-size: 16px;
  font-weight: 500;
  color: #202020;
  display: flex;
  align-items: center;
  .title-img {
    margin-left: 12px;
    cursor: pointer;
    width: 18px;
    height: 18px;
  }
}
.vin-prepend {
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
}
.car-info {
  .car-info_footer {
    padding: 11px 16px;
    background: #fafafa;
    font-size: 14px;
    color: #575757;
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
  }
}
</style> 